<template>
  <div class="downloadFile">
    <div class="changeList">
      <check-icon
        :value.sync="item.checked"
        class="check-icon-radio"
        style="padding: 0 0.21rem;display: flex;align-items: center;border-bottom: 1px #ccc solid;position: relative;"
        v-for="(item, index) in downloadFile"
        :key="index"
        @click.native="change(index)"
      >
        <div class="cell">
          <div class="cell-hd">
            <img v-if="item.fileext == 'pdf'" src="@/assets/img/pdf.png" alt />
            <img v-if="item.fileext == 'zip'" src="@/assets/img/file.png" alt />
            <img v-if="item.fileext == 'photo'" src="@/assets/img/tupian.png" alt />
          </div>
          <div class="cell-bd">
            <p class="cell-bd_title">{{item.title?item.title:item.name}}</p>
            <p class="cell-bd_desc">{{item.time?item.time:item.create_time}}</p>
          </div>
          <div class="cell-fd">{{item.size}}</div>
        </div>
      </check-icon>
    </div>
    <div class="check-icon-all">
      <check-icon :value.sync="checked" class="check-icon">
        <div class="cell">
          <div class="cell-bd" @click.native="checkAll">全选</div>
        </div>
      </check-icon>
      <div class="cell-fd_title" @click.stop="getFile">
        <img src="@/assets/img/download.png" alt />下载
      </div>
    </div>
    <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
      <div class="dialog-box">
        <p>复制链接到PC端浏览器打开并下载</p>
        <p>{{link}}</p>
        <x-button
          type="default"
          mini
          class="code"
          :data-clipboard-text="link"
          @click.native="copy"
        >复制地址</x-button>
      </div>
      <div @click="showHideOnBlur=false">
        <span class="vux-close"></span>
      </div>
    </x-dialog>
  </div>
</template>

<script>
import { CheckIcon, XDialog, XButton } from "vux";
import Clipboard from "clipboard";
export default {
  components: {
    CheckIcon,
    XDialog,
    XButton
  },
  props: {
    downloadFile: {
      type: Array,
      required: true,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      checked: false,
      showHideOnBlur: false,
      link: 'http://pergoqiniu.laigl.com/admin/20191216/034fddf72324407f8b8549eb89a4f2dc.pdf?e=1577448245&token=P_U4QglrKSAyY-80Ak-Wn_NWEpqqaU68p-mmK59S:UUuN4KktoPiSr7NusgcAQzmh8IU=&attname=201906201929391949.pdf'
    };
  },
  watch: {
    checked(val, oldValue) {
      this.checkAll(val);
    }
  },
  computed: {
  	isAllChecked() {
  	  return this.downloadFile.some((e) => {
  	    return e.checked === true;
  	  });
  	},
  },
  methods: {
    getFile() {
      if (this.isAllChecked) {
        this.showHideOnBlur = true;
      } else{
        this.$vux.toast.text("您还未选择文件！", "top");
      }
    },
    change(index) {
      let checked = this.downloadFile[index].checked;
      checked ? true : false;
    },
    checkAll(bool) {
      this.downloadFile.forEach((e, i) => {
        e.checked = bool;
      });
    },
    copy() {
      let clipboard = new Clipboard(".code");
      clipboard.on("success", e => {
        this.$vux.toast.text("复制成功", "top");
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        this.$vux.toast.text("手机权限不支持复制功能", "top");
        clipboard.destroy();
      });
    }
  }
};
</script>

<style lang="less" scoped>
.dialog-box {
  padding: 0.4rem 0;
  width: 5.4rem;
  margin: 0 auto;
  overflow: hidden;
  p {
    margin-bottom: 0.4rem;
  }
}
.check-icon-all {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.18rem 0;
  box-shadow: 0 -2px 4px #eaeaea;
  .cell-fd_title {
    position: absolute;
    top: 50%;
    right: 0.21rem;
    margin-top: -0.36rem;
    font-size: 0.25rem;
    display: flex;
    align-items: center;
    height: 0.72rem;
    padding: 0 0.3rem;
    border: 1px #ccc solid;
    box-sizing: border-box;

    img {
      width: 0.36rem;
      margin-right: 0.09rem;
    }
  }
}

.check-icon {
  padding: 0 0.21rem;
  display: flex;
  align-items: center;
  position: relative;
}

.changeList {
  margin-bottom: 1.81rem;
}

.cell {
  width: 100%;
  display: flex;
  padding: 0.18rem 0.09rem;
  box-sizing: border-box;

  .cell-hd {
    margin-right: 0.27rem;
    display: flex;
    align-items: center;

    img {
      display: block;
      width: 0.54rem;
    }
  }

  .cell-bd {
    .cell-bd_title {
      width: 3.62rem;
      font-size: 0.28rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cell-bd_desc {
      font-size: 0.25rem;
      color: #6e6e6e;
    }
  }

  .cell-fd {
    position: absolute;
    bottom: 0.18rem;
    right: 0.21rem;
    font-size: 0.25rem;
    color: #6e6e6e;
  }
}
</style>
